<div class="box data_box" style="background: #ffffff;height: 770px;">
    <h3 style="margin-left: 30px;padding-bottom: 10px;" >
        访问日志
        <button type="button" class="btn btn-primary" style="float: right; margin-right: 20px;"  @click="deleteLogs" >批量删除</button>
    </h3>
    <div class="box-body table-responsive no-padding" style="height: 82%">
        <table class="table table-bordered ">
            <tr style="background: #5bc0de">
                <td style="width: 60px;"  ><input type="checkbox" id="checkAll"  @click="checkLogIds" >全选</td>
                <th>日志编号</th>
                <th>访问用户</th>
                <th>访问人ip地址</th>
                <th>访问方法</th>
                <th>访问的参数</th>
                <th>访问时间</th>
            </tr>
            <tbody id="tbodyId">
            <tr v-for="item in logList">
                <td ><input type="checkbox" id="logIds" name="logIds"  class="logIds" :value="item.id" ></td>
                <th>{{ item.id }}</th>
                <th>{{ item.username }}</th>
                <th>{{ item.ipaddress }}</th>
                <th>{{ item.method }}</th>
                <th>{{ item.params }}</th>
                <th>{{ item.createtime }}</th>
            </tr>
            </tbody>
        </table>
    </div>

    <!-- 分页信息 -->
    <div style="float: right;margin-right: 20px;">
        <ul class="pagination">
            <li><a id="first" @click ="firstPage" >首页 </a></li>
            <li :class =" pageCurrent==1 ? 'disabled' : ''"  @click ="prePage"><a id="pre">上一页  </a></li>
            <li><a>当前页({{pageCurrent }})</a></li>
            <li :class =" pageCurrent== pageCount ? 'disabled' : ''"  @click ="nextPage" ><a id="next">下一页 </a></li>
            <li @click="endPage"><a id="last">尾页</a></li>
            <li ><a>总页数( {{ pageCount }} )</a></li>
        </ul>
    </div>

</div>
<script src="js/vue.min.js"></script>
<script src="js/vue-resource.min.js"></script>
<script type="text/javascript">
    $(function () {
        getLogList();
    });

    function getLogList(){
        // 获取开始的15条数据
        $.post("/log/page",{ startrow : 0 , pagesize : 15 },function (res) {
            logVue._data.logList = res.data;
        })
        // 获取总页数
        $.get("/log/count",function (res) {
            logVue._data.pageCount = res.data;
        })
    }
    // 数据页面
    var logVue = new Vue({
        el:".data_box",
        data : {
            logList : [],
            pageCurrent : 1, // 当前页
            pageCount : 1 ,  // 总页数
        },methods : {
            firstPage : function () { // 首页
                this.pageCurrent = 1;
                this.getLogList();
            },
            prePage : function () { // 上一页
                if(this.pageCurrent <= 1){
                    return
                }else{
                    this.pageCurrent --;
                    this.getLogList();
                }
            },
            nextPage : function () { // 下一页
                if(this.pageCurrent >= this.pageCount){
                    return
                }else{
                    this.pageCurrent ++;
                    this.getLogList();
                }
            }
            ,endPage : function () {  // 尾页
                this.pageCurrent = this.pageCount;
                this.getLogList();
            },getLogList : function () {
                // 重新获取数据
                var pagesize = 15;
                var startrow  = (this.pageCurrent-1)*pagesize;
                var params = {
                    startrow : startrow,
                    pagesize : pagesize,
                }
                $.post("/log/page",params,function (res) {
                    logVue._data.logList = res.data;
                })
            },checkLogIds : function () {
                //获取thead中checkbox对象状态
                var flag=$("#checkAll").prop("checked")
                //修改tbody中checkbox对象状态
                $("#tbodyId input[type='checkbox']").each(function(){
                    $(this).prop("checked",flag);
                });
            }, deleteLogs : function () {
                // 获取复选框中的值
                var ids=[];
                //2.获取tbody中所有的checkbox
                $("#tbodyId input[type='checkbox']").each(function(){
                    // .each()迭代所有的CheckBox
                    //存储选中的checkbox的值
                    //$(this)代表当前checkbox对象
                    if($(this).prop("checked")){
                        ids.push($(this).val());
                    }
                });
                if(confirm("确认删除？")){
                    var params = {
                        ids : ids.toString(),
                    }
                    $.post("/log/delete",params,function (res) {
                        if(res.state == 1){
                            alert("删除成功");
                        }else{
                            alert("删除失败");
                        }
                        getLogList();
                        $("#tbodyId input[type='checkbox']").each(function(){
                            $(this).prop("checked",false);
                        });
                    });
                }

            }
        }

    });

    $("#tbodyId").on("change",".logIds",function () {
        //获取tbody中所有checkbox对象状态相与的结果
        var flag=true;
        $("#tbodyId input[type='checkbox']").each(function(){
            flag=flag&&$(this).prop("checked");
        });
        //修改thead中checkbox对象状态
        $("#checkAll").prop("checked",flag);
    });



</script>